<template>
  <div>
    <div
      style="
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000000000000000000000000000000;
        background: #fff;
      "
    >
      <div class="header">
        <div class="serch">
          <span>{{ list3 }} <b>x</b> </span>
        </div>
        <div id="qiehuan" @click="qiehuan1(index)">
          {{ qiehuan }}
        </div>
      </div>
      <div class="Navlist">
        <ul style="display: flex; justify-content: space-around">
          <li
            v-for="(item, index) in navList"
            :key="item.id"
            :class="{ active: index === Index }"
            @click="changeActive(index)"
          >
            {{ item.type }}
          </li>
        </ul>
      </div>
      <div style="display: flex; justify-content: space-around">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @open="inx = 3"
          />
        </van-dropdown-menu>
        <div
          v-for="(item, index) in navList1"
          :key="item.id"
          :class="{ erjinav: true, active1: inx == index }"
          @click="changeColor(index)"
        >
          {{ item.type }}
        </div>
        <div>
          <van-cell is-link @click="showPopup">筛选</van-cell>
          <van-popup
            v-model="show"
            position="right"
            :style="{ height: '100%', width: '80%' }"
          >
            <van-cell is-link @click="showPopup11"
              >配送至
              <span
                >北京昌平区刘欢以内沙河沙阳路18号北京科技职业学院千锋教育</span
              >
            </van-cell>
            <van-popup
              v-model="show1"
              position="right"
              :style="{ height: '100%', width: '80%' }"
              ><span>&lt;返回</span
              ><b style="display: inline-block; width: 75%; text-align: center"
                >配送至</b
              >
              <div>
                <van-radio-group v-model="radio" style="margin-top: 30px">
                  <van-radio name="1">大连某职业技术学院</van-radio>
                  <van-radio name="2" style="margin-top: 30px"
                    >鞍山矿山高中扛把子小屋</van-radio
                  >
                </van-radio-group>
              </div>
            </van-popup>
          </van-popup>
        </div>
      </div>
      <div class="search-slogan">
        <img
          src="https://img11.360buyimg.com/jdphoto/s690x60_jfs/t1/42257/6/11766/3918/5d521db6Ef3b8f932/d971644aefa0e1ae.png"
          class="image"
        />
      </div>
    </div>
    <div class="xiding">
      <van-sticky :offset-top="229">
        <!-- <van-button type="primary" style="width:100%;overflow:hidden;"> -->
        <!-- <div v-show="isSticky1">
            <van-swipe class="my-swipe" loop:true touchable:true stop-propagation:true indicator-color="white" width="50px" @change="swipe_(index)">
            <van-swipe-item>京东物流</van-swipe-item>
            <van-swipe-item>新品</van-swipe-item>
            <van-swipe-item>品牌</van-swipe-item>
            <van-swipe-item>卡口</van-swipe-item>
             <van-swipe-item>适用机</van-swipe-item>
            <van-swipe-item>滤镜直径</van-swipe-item>
            <van-swipe-item>画幅</van-swipe-item>
            <van-swipe-item>镜头类型</van-swipe-item>
          </van-swipe>
          </div> -->
        <div class="swiper-container" v-show="isSticky1">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in threeNav" :key="item.id">
              {{ item.type }}
            </div>
          </div>
        </div>

        <!-- </van-button> -->

        <!-- <app-scroll></app-scroll> -->
      </van-sticky>
    </div>
    <div class="xuanran">
      <!-- <img src="item.href" alt=""> -->
      <ul>
        <li
          v-for="item in xuanran"
          :key="item.id"
          @click="toXiangQing(item.id)"
        >
          <img :src="item.href" alt="" />
          {{ item.productItem }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import uri from "@/config/uri";
import Vue from "vue";
import { DropdownMenu, DropdownItem, Popup, Cell, Sticky, Button } from "vant";
import { RadioGroup, Radio } from "vant";
import { Swipe, SwipeItem } from "vant";
import Swiper from "swiper"; // 相当于导入js
import "swiper/swiper-bundle.min.css";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Button);
Vue.use(Sticky);
Vue.use(Cell);
Vue.use(Popup);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

//
// import scrool from '../app-scroll/app-scroll'
export default {
  // component:{
  //     scrool
  //   },
  data() {
    return {
      list3: "",
      isSticky1: true,
      index: 1,
      radio: "1",
      inx: 3,
      show: false,
      show1: false,
      Index: 0,
      qiehuan: "喵",
      all: [],
      xuanran: [],
      navList: [
        { id: 1, type: "全部" },
        { id: 2, type: "京东" },
        { id: 3, type: "工厂直销" },
        { id: 4, type: "直播视频" },
      ],
      threeNav: [
        { id: 1, type: "京东物流" },
        { id: 2, type: "新品" },
        { id: 3, type: "品牌▽" },
        { id: 4, type: "颜色▽" },
        { id: 5, type: "尺码" },
        { id: 6, type: "填充物" },
        { id: 7, type: "领型" },
        { id: 8, type: "充绒量▽" },
      ],
      active11: false,
      navList1: [
        { id: 1, type: "销量" },
        { id: 2, type: "价格" },
      ],
      value1: 0,
      option1: [
        { text: "综合", value: 0 },
        { text: "最新上架", value: 1 },
        { text: "评价最多", value: 2 },
      ],
    };
  },
  methods: {
    toXiangQing(id) {
      console.log(1);
      this.$router.push("/detail/" + id);
    },
    showPopup() {
      this.show = true;
      this.inx = 3;
    },
    showPopup11() {
      this.show1 = true;
      this.inx = 3;
    },
    showPopup1() {
      // this.inx = 3
      console.log(1);
    },
    changeActive(index) {
      this.Index = index;
      // console.log(index);
      this.xuanran = [];
      if (index === 0) {
        this.$http.get(uri.getNvzhuang).then((ret) => {
          this.xuanran = ret.data;
        });
      } else if (index === 1) {
        this.$http.get(uri.getNanzhuang).then((ret) => {
          this.xuanran = ret.data;
        });
      } else if (index === 2) {
        this.$http.get(uri.getFenlei).then((ret) => {
          this.xuanran = ret.data;
        });
      } else if (index === 3) {
        // this.$router.push="/Category"
        this.$router.push("/live");
        // console.log(this.$route);
        console.log(1);
      }
    },
    changeColor(index) {
      this.inx = index;

      //   this.index11.push(index)
      //   if (index === this.index1) {
      //     this.active11 = true;
      //   }
      //   this.index1 = index;
    },
    qiehuan1(index) {
      this.index % 2 === 1 ? (this.qiehuan = "喵") : (this.qiehuan = "汪");
      this.index++;
      console.log(index);
    },
    swipe_(index) {
      console.log(index);
    },
  },
  created() {
    this.$store.commit("setIsShow", false);
    // console.log(this.$route.params.tit);

    this.list3 = this.$route.params.tit;

    this.$http.get(uri.getNvzhuang).then((ret) => {
      console.log(ret);
      this.xuanran = ret.data;
    });
  },
  mounted() {
    // 监听滚动条
    window.addEventListener("scroll", () => {
      let scrollTop = document.documentElement.scrollTop;
      // console.log(scrollTop);
      if (scrollTop >= 200) {
        // 需要固定定位样式
        this.isSticky1 = false;
      } else {
        // 不应用固定定位样式（0-200高度之间不用样式）
        this.isSticky1 = true;
      }

      new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 20,
      });
      // if(scrollTop < 200){
      //   this.isSticky1 = true;
      // }
    });
  },
  beforeRouteLeave(to, from, next) {
    // console.log(333);
    this.$store.commit("setIsShow", true);
    next();
  },
};
</script>
<style lang="scss" scoped>
// @import url('');
.header {
  height: 44px;
  background: crimson;
  display: flex;
}
.serch {
  width: 80%;
  height: 26px;
  line-height: 26px;
  margin-top: 9px;
  border-radius: 15px;
  margin-left: 8%;
  background: #f4f4f4;
}
.serch span {
  display: block;
  width: 110px;
  text-align: center;
  line-height: 20px;
  margin-top: 3px;
  font-size: 14px;
  color: #ffffff;
  background: gray;
  border-radius: 10px;
  margin-left: 5px;
}
#qiehuan {
  width: 10%;
  text-align: center;
  line-height: 44px;
}
.active {
  font-size: 20px;
  font-weight: bold;
}
.Navlist {
  margin-top: 10px;
  height: 72px;
}
.Navlist li {
  padding: 15px;
}
.active::after {
  text-align: center;
  content: " ";
  display: block;
  width: 100%;
  height: 4px;
  background: orange;
}
.erjinav {
  color: #323233;
  font-size: 15px;
  line-height: 22px;
  cursor: pointer;
  user-select: none;
  margin-top: 10px;
}
.active1 {
  color: red;
}
.search-slogan {
  margin-top: 3%;
  width: 100%;
  height: 44px;
  text-align: center;
}
.search-slogan img {
  width: 62%;
}
.xuanran {
  margin-bottom: 50px;
}
.xuanran img {
  margin-right: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: center;
  background-color: #39a9ed;
}
.xiding {
  margin-top: 230px;
}
.swiper-slide {
  background: #f4f4f4;
  /* flex: 1; */
  display: inline-block;
  white-space: nowrap;
  margin-right: 20px;
}
</style>